<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <link rel="stylesheet" href="QuestionDetail.css">
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.4.1/jquery.min.js"></script>
    <title>问答详情</title>
</head>

<body>
    <header class="wenda-header">
        <ul>
            <li><img src="images/head.png"> </li>
            <li><a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.yuekao.kaoyanquestion">下载</a></li>
        </ul>
    </header>
    <div class="question">
        <p class="title" id="title"></p>
        <p class="describe" id="describe"></p>
        <img src="" id="questionImage">
        <div class="infos">
            <img class="headImage" id="headImage">
            <p class="name" id="name">考研生</p>
            <img src="images/look.png" class="lookView">
            <p class="looks" id="looks"></p>
        </div>
        <div class="line"></div>
        <div class="question-tag">
            <ul id="questionTagList">
                <li>南京大学</li>
                <li>哲学</li>
                <li>上海交通大学</li>
                <li>科学社会主义与国际共产主义运动</li>
                <li>影视学</li>
            </ul>
        </div>
        <div class="space"></div>
        <div class="allAnswers">
            <div></div>
            <div>
                <p id="allAnswersNumber">全部回答</p>
            </div>
        </div>
        <div class="answerList" id="answer-list">
            <ul class="nameUrl">
                <img src="#">
                <li>张冬青</li>
            </ul>
            <ul class="contentUrl">
                <li>这篇文章很不错嘛,看了之后受益匪浅啊受益匪浅啊受益匪浅啊受益匪浅啊受益匪浅啊</li>
            </ul>
            <ul class="infoUrl">
                <li>刚刚</li>
                <li>22喜欢</li>
                <li>16评论</li>
            </ul>
            <ul class="lineUrl">
                <li></li>
            </ul>
        </div>
    </div>


    <script src="https://cdn.bootcss.com/js-url/2.5.2/url.min.js"></script>
    <script type="text/javascript">


    $(function() {

        $('#openApp').onclick = function () {
            window.location.href = "okaoyan.com://";
                   window.setTimeout(function(){
                            window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.yuekao.kaoyanquestion";//打开app下载地址，有app同事提供
                   },2000)
        };
        //获取参数
        var id = url('?id');
        //获得题目详情
        $.ajax({
            url: 'https://api.okaoyan.com:9293/api/v3/questions/detail_ios?id=' + id,
            type: 'GET',
            dataType: 'json',

            success: function(data) {
                var question = data.question;
                console.log('------'+question);
                $('#title').text(question.title);
                if (question.start_user.username.length != 0) {
                    $('#name').text(question.start_user.username);
                }
                if (question.description.length != 0) {
                    $('#describe').text(question.description);
                }

                $('#allAnswersNumber').text('全部回答 (共' + question.answer_num + '条)');
                $('#looks').text(question.views_count);
                $("#headImage").attr('src', 'https://api.okaoyan.com:9293' + question.start_user.avatar);

                if (question.images.length != 0){
                    $("#questionImage").attr('src', 'https://api.okaoyan.com:9293' + question.images[0]);
                }

                var schools = question.schools;
                var majors = question.majors;
                var memrge = $.merge(schools, majors);
                var taglistHtml = "";
                for (var i = 0, len = memrge.length; i < len; i++) {
                    taglistHtml += "<li>" + memrge[i]['name'] + "</li>";
                }

                $('#questionTagList').empty();
                $('#questionTagList').append(taglistHtml);
            },
        })

        //获得回答
        $.ajax({
            url: 'https://api.okaoyan.com:9293/api/v3/questions/' + id + '/answers',
            type: 'GET',
            dataType: 'json',

            success: function(data) {
                console.log(data)
                var answers = data.answers;
                var answerHtml = "";
                for (var i = 0, len = answers.length; i < len; i++) {
                    var answerArr = answers[i];
                    var imgStr = 'https://api.okaoyan.com:9293' + answerArr.user_avatar;
                    answerHtml += "<ul class='nameUrl'><img src=" + 'https://api.okaoyan.com:9293' + answerArr.user_avatar + ">" +
                        "<li>" + answerArr.user_name + "</li>" +
                        "</ul><ul class='contentUrl'>" +
                        "<li>" + answerArr.context + "</li>" +
                        "</ul><ul class='infoUrl'>" +
                        "<li>" + answerArr.updated_at + "</li>" +
                        "<li>" + answerArr.comments_num + "喜欢</li>" +
                        "<li>" + answerArr.agree + "评论</li>" +
                        "</ul><ul class='lineUrl'><li></li></ul>";
                }
                $('#answer-list').empty();
                $('#answer-list').append(answerHtml);
            },
        })
    })
    </script>
</body>

</html>